<template>
    <div class="index-wrapper">
        <Header>
            <div class="index-tabbar">
                
                <span class="tabbar-item" :class="selected == 1 ? 'active' : ''" @click="toggleBar(1)">首页</span>
                <span class="tabbar-item" :class="selected == 2 ? 'active' : ''" @click="toggleBar(2)">选项二</span>
                <span class="tabbar-item" :class="selected == 3 ? 'active' : ''" @click="toggleBar(3)">选项三</span>
            </div>
        </Header>
        <v-sheet
            id="scrolling-techniques-7"
            class="overflow-y-auto"
            max-height="760"
        >
            <v-container style="height: auto;">
                <keep-alive>
                    <transition :name="sliderAnimation">
                        <router-view />
                    </transition>
                </keep-alive>
            </v-container>
        </v-sheet>
       <Control />
        
    </div>
</template>
<script>
import Header from '@/components/header/commHeader'
import Control from '@/components/control/control'

export default {
    name: 'Home',
    components: {
        Header,
        Control
    },
    data(){
        return {
            selected: 1,
            onTouch: false,
            offset: 0,
            sliderAnimation: 'slide-left'
        }
    },
    watch:{
        selected(n){
            this.selected = n;
            if(this.selected == 1){
                this.$router.push('/home/main')
            }else if(this.selected == 2){
                this.$router.push('/home/catagory')
            }else{
                this.$router.push('/home/singer')
            }
        }
    },
    methods: {
        onTouchStart(e){
            if(!e.changedTouches || e.changedTouches.length == 0) return;
            var x = e.changedTouches[0].clientX;
            if(x){
                this.offset = x;
            }
        },
        onTouchEnd(e){
            if(!e.changedTouches || e.changedTouches.length == 0) return;
            var x = e.changedTouches[0].clientX;

            if((x - this.offset) > 100 ){
                // 从左往右滑
                this.sliderAnimation = 'slide-left';
                if(this.selected == 1){
                    this.selected = 1;
                }else{
                    this.selected--;
                }
                

            }else if((x- this.offset) < -100 ){
                // 从右往左滑
                this.sliderAnimation = 'slide-right';
                if(this.selected == 3){
                    this.selected = 3;
                }else{
                    this.selected++;
                }
            }

            this.offset = 0;
        },
        toggleBar(index){
            if(this.selected > index){
                this.sliderAnimation = 'slide-left'
            }else{
                this.sliderAnimation = 'slide-right'
            }
            this.selected = index;
        }
    }
}
</script>
<style lang="scss" scoped>
    @import '@/assets/styles/global';
    .index-wrapper {
        .index-tabbar {
            @include defaultTitle;
            .tabbar-item {
                display: inline-block;
                color: #333;
                text-decoration: none;
                transition: all ease .2s;
                width: px2rem(60);
                &.active {
                    color: skyblue;
                    @include bigTitle;
                }
            }
        }

        .index-container {
            width: 100%;
            height: 100vh;
        }
    }
</style>